<template>
  <div>
    <n-card title="学生管理" style="margin-bottom: 16px">
      <n-tabs type="line" v-model:value="tabValue">
        <n-tab-pane name="list" tab="学生列表">
          <n-table :bordered="false" :single-line="false">
            <thead>
              <tr class="tr-th-1">
                <th>学号</th>
                <th>姓名</th>
                <th>班级</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(stu, index) in stuListInfo" :key="index">
                <td :class="('tr-color-'+ index % 2)">{{ stu.stu_id }}</td>
                <td :class="('tr-color-'+ index % 2)">{{ stu.stu_name }}</td>
                <td :class="('tr-color-'+ index % 2)">
                  <n-space align="center">
                    <div class="aa">{{ stu.stu_class }}</div>
                  </n-space>
                </td>
                <td :class="('tr-color-'+ index % 2)">
                  <n-button class="td-n" @click="toUpdate(stu)">修改</n-button>
                  <n-button class="td-n" @click="toDelete(stu)">删除</n-button>
                </td>
              </tr>
            </tbody>
          </n-table>
          <n-pagination
            v-model:page="searchParams.page"
            :page-count="searchParams.pageCount"
            @update:page="loadstu()"
          />
        </n-tab-pane> 
        <n-tab-pane name="add" tab="添加学生" class="add-4">
          <div class="button-1">
          <n-form>
            <div class="add-2">
            <n-form-item label="学号:" class="add-1">
              <n-input
                v-model:value="addStudent.stu_id"
                placeholder="请输入学号"
              />
            </n-form-item>
            <n-form-item label="姓名:" class="add-1">
              <n-input
                v-model:value="addStudent.stu_name"
                placeholder="请输入姓名"
              />
            </n-form-item>
            <n-form-item label="班级:" class="add-1">
              <n-select class="add-3"
                v-model:value="addStudent.stu_class"
                :options="classOptions"
              />
            </n-form-item>

            <n-form-item label="">
              <n-button @click="add" class="n-button-1">提交</n-button>
            </n-form-item>
          </div>
          </n-form>
        </div>
        </n-tab-pane>
        <n-tab-pane name="update" tab="修改" class="add-4">
          <div class="button-1">
          <n-form>
            <div class="add-2">
            <n-form-item label="学号:" class="add-1">
              <n-input
                v-model:value="updateStu.stu_id"
                placeholder="请输入学号"
              />
            </n-form-item>
            <n-form-item label="姓名:" class="add-1">
              <n-input
                v-model:value="updateStu.stu_name"
                placeholder="请输入姓名"
              />
            </n-form-item>
            <n-form-item label="班级:" class="add-1">
              <n-select class="add-3"
                v-model:value="updateStu.stu_class"
                :options="classOptions"
              />
            </n-form-item>

            <n-form-item label="">
              <n-button @click="update" class="n-button-1">提交</n-button>
            </n-form-item>
          </div>
          </n-form>
        </div>
        </n-tab-pane>
      </n-tabs>
    </n-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";
import { useMessage } from "naive-ui";
const message = useMessage();
const router = useRouter();
const route = useRoute();

const searchParams = reactive({
  page: 1,
  pageSize: 5,
  pageCount: 1,
});

const stuListInfo = ref([]); //学生列表数据
const tabValue = ref("list");
//学生班级分类选项内容
const classOptions= ref([]);
const classO = ref([]);

onMounted(() => {
  loadstu(); //
});
//读取学生列表
const loadstu = async () => {
  let res = await axios({
    method: "get",
    url: `/stu/list`,
  });
  stuListInfo.value = res.data.data;
  console.log(stuListInfo);

  stuListInfo.value.forEach((item) => {
    let index = classO.value.findIndex((value) => value.name == item.stu_class);
    index === -1? classO.value.push({ value: 1, name: item.stu_class }): classO.value[index].value++;
  });
    // console.log(classO)
  classOptions.value = classO.value.map((item) => {
    return { label: item.name, value: item.name };
  });
  searchParams.pageCount =
    parseInt(res.data.data.length / searchParams.pageSize) +
    (res.data.data.length % searchParams.pageSize == 0 ? 0 : 1);
  console.log(searchParams.page);
};

//学生添加数据
const addStudent = reactive({
  stu_id: "",
  stu_name: "",
  stu_class: "",
});

//修改学生数据
const updateStu = reactive({
  stu_id: "",
  stu_class: "",
  stu_name: "",
});

const toUpdate = async (stu) => {
  tabValue.value = "update";
  updateStu.stu_id = stu.stu_id;
  updateStu.stu_name = stu.stu_name;
  updateStu.stu_class = stu.stu_class;
};

const update = async () => {
  let res = await axios({
    method: "put",
    url: "/stu/update",
    data: updateStu,
  });
  if (res.data.code == 200) {
    message.info(res.data.msg);
    loadstu();
    tabValue.value = "list";
  } else {
    message.error(res.data.msg);
  }
};

//添加学生
const add = async () => {
  let res = await axios({
    method: "post",
    url: "/stu/add",
    data: addStudent,
  });
  console.log(res);
  if (res.data.code == 200) {
    message.info(res.data.msg);
    loadstu();
    tabValue.value = "list";
  } else {
    message.error(res.data.msg);
  }
};

//删除学生
const toDelete = async (stu) => {
  let res = await axios({
    method: "delete",
    url: `/stu/delete/${stu.stu_id}`,
  });
  console.log(res);
  if (res.data.code == 200) {
    message.info(res.data.msg);
    loadstu();
  } else {
    message.error(res.data.msg);
  }
};
</script>

<style lang="scss" scoped>
.tr-th-1{
  font-size:20px;
  text-align: center;
  font-weight: bolder;
}
.tr,th{
  font-weight: bolder;
  border: rgb(104, 100, 100) 3px solid;
  background: rgb(255, 193, 177);
}
       .table {
            width: 30%;
        }
        .table tr {
            text-align: center;
            height: 30px;
        }
        .table th,td {
            border: rgb(104, 100, 100) 1px solid;
        }
        .td-n{
          border: rgb(104, 100, 100) 1px solid;

        }
        .tr-color-0 {
            font-size: 19px;
            background: #d3cffc;
            text-align: center;
            font-weight: bold;
        }
        .tr-color-1 {
            font-size: 19px;
            background: rgb(255, 219, 233);
            text-align: center;
            font-weight: bolder;
        }
        .aa{
          display: flex;
          justify-items: center;
          align-items: center;
        }
        .n-input{
          height: 40px;
          background: #c1d9e0;
          border-radius: 8px;
          font-size: 18px;
          display: flex;
          justify-items: center;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #2c2c2c;
        }
        .add-1{
          display:flex;
          // justify-items: center;
          align-items:center;
          font-size: 50px;
          font-weight: bolder;
          padding:20px;
        }
        .add-2{
          width: 400px;
          font-size: 50px;
          display:grid;
          justify-items: center;
          align-items:center;
          background: rgb(243, 229, 229);
          border-radius: 20px;
          box-shadow: 5px 5px 5px 5px gray;
        }
        .add-3{
          display:grid;
          width: 218px;
          font-size: 50px;
          justify-items: center;
          border: #cce7e7 1px solid;
        }
        .add-4{
          display:grid;
          justify-items: center;
          align-items:center;
        }
        .button-1{
          height: 600px;
          width: 600px;
          display:grid;
          justify-items: center;
          align-items:center;
          font-weight: bolder;
          background: rgb(240, 203, 203);
          border-radius: 30px;
          box-shadow: 8px 8px 8px 8px gray;
        }
        .n-button-1{
          background: rgb(213, 248, 190);
          border: #2c2c2c 1px solid;
          box-shadow: 1px 1px 1px 1px rgb(239, 255, 213);
          border-radius: 10px;
        }
</style>
